<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./assets/layui/css/layui.css" />
  </head>
  <body>
    <div class="layui-container">
      <div id="demoTransfer"></div>
    </div>

    <script src="./assets/layui/layui.js"></script>
    <script>
      layui.use(["transfer"], function () {
        var transfer = layui.transfer;
        transfer.render({
          elem: "#demoTransfer", //绑定元素
          title: ["标题一", "标题二"],
          id: "demo1", //定义索引
          showSearch: true, // 是否开启搜索
          width: 200,
          height: 200,
          value: [], // 	初始选中的数据
          text: {
            none: "无数据", //没有数据时的文案
            searchNone: "无匹配数据", //搜索无匹配数据时的文案
          },
          // parseData: function (res) {
          //   //用于对数据源进行格式解析
          //   return {
          //     value: res.id, //数据值
          //     title: res.name, //数据标题
          //     disabled: res.disabled, //是否禁用
          //     checked: res.checked, //是否选中
          //   };
          // },
          data: [
            { value: "1", title: "李白", disabled: "", checked: "" },
            { value: "2", title: "杜甫", disabled: "", checked: "" },
            { value: "3", title: "贤心", disabled: "", checked: "" },
          ],
          onchange: function (data, index) {
            // 左右穿梭的回调
            console.log(data); //得到当前被穿梭的数据
            console.log(index); //如果数据来自左边，index 为 0，否则为 1
          },
        });

        transfer.set({}); //设定全局默认参数。options 即各项基础参数
        transfer.getData("demo1"); //获得右侧数据
        transfer.reload("demo1", { showSearch: false, title: ["标题一2", "标题二2"] }); //重载实例
      });
    </script>
  </body>
</html>
